<script setup>
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { sendSmsCode,userLogin } from "./api";
import userStore from "@/store/modules/user";
import { showToast  } from "vant";
import { getCompanyCode } from "./utils/token";
let user = userStore();
console.log(user);
let active = ref(0);
let route = useRoute();
let router = useRouter();
watch(active, () => {
  if (active.value == 0) {
    router.push("/home");
  } else if (active.value == 1) {
    router.push("/dynamic");
  } else if (active.value == 2) {
    router.push("/server");
  } else if (active.value == 3) {
    router.push("/mine");
  }
});
watch(route, () => {
  if (route.path == "/home") {
    active.value = 0;
  } else if (route.path == "/dynamic") {
    active.value = 1;
  } else if (route.path == "/server") {
    active.value = 2;
  } else if (route.path == "/mine") {
    active.value = 3;
  } else {
    active.value = null;
  }
});
//
let isShowTabbar = computed(() => {
  return ["/home", "/dynamic", "/server", "/mine"].includes(route.path);
});
// 登录
let loginForm = ref({
  tel: "",
  code: "",
});
let times = ref(60);
let isSend = ref(false);
let timeSet = null;
// localStorage.setItem('msgId','e938d211495d469b8112af8f9f58167e')
function sendCode() {
  sendSmsCode(loginForm.value.tel).then((res) => {
    isSend.value = true;
    localStorage.setItem('msgId',res.data.msgId)
    timeSet = setInterval(() => {
      times.value -= 1;
      if (times.value == 0) {
        isSend.value = false;
        times.value = 60;
        clearInterval(timeSet);
      }
    }, 1000);
  });
}
function login(){
  if(!loginForm.value.tel){
    showToast('请填写手机号')
    return
  }
  if(!loginForm.value.code){
    showToast('请填写验证码')
    return
  }
  user.login({
    "phone":loginForm.value.tel,
    "msgId":localStorage.getItem('msgId'),
    "code":loginForm.value.code,
    "companyCode":getCompanyCode()
})
  
}
// 影藏
function hidLogin() {
  user.isShow(false);
}
</script>

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component v-if="route.meta.keepAlive" :key="route.name" :is="Component" />
    </keep-alive>
    <component v-if="!route.meta.keepAlive" :key="route.name" :is="Component" />
  </router-view>
  <div class="login_men"  v-if="user.$state.showLogin">
    <div class="login" @click.stop>
      <div class="login_t">登录</div>
      <div class="close" @click="hidLogin"><van-icon name="cross" /></div>
      <div>
        <van-field v-model="loginForm.tel" type="tel" placeholder="请输入手机号" maxlength="11" />
        <van-field v-model="loginForm.code" type="digit" placeholder="请输入验证码">
          <template #button>
            <van-button size="small" :disabled="isSend" class="send_code" @click="sendCode" type="success">
              {{ isSend ? times + "s" : "发送验证码" }}
            </van-button>
          </template>
        </van-field>
      </div>
      <van-button class="login_btn" size="small" @click="login" type="primary">
        登录
      </van-button>
    </div>
  </div>

  <van-tabbar v-show="isShowTabbar" v-model="active">
    <van-tabbar-item>
      <span>首页</span>
      <template #icon="props">
        <i :class="[
          'iconfont',
          props.active ? 'icon-home-surface' : 'icon-home-line',
        ]"></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item>
      <span>动态</span>
      <template #icon="props">
        <i :class="[
          'iconfont',
          props.active ? 'icon-order-surface' : 'icon-order-line',
        ]"></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item>
      <span>服务</span>
      <template #icon="props">
        <i :class="[
          'iconfont',
          props.active ? 'icon-category-surface' : 'icon-category-line',
        ]"></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item>
      <span>我的</span>
      <template #icon="props">
        <i :class="[
          'iconfont',
          props.active ? 'icon-mine-surface' : 'icon-mine-line',
        ]"></i>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>
.van-tabbar-item--active {
  color: var(--el-color-primary);
}

.login_men {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100vw;
  z-index: 10;

  .login {
    width: 300px;
    position: absolute;
    /* height: 200px; */
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 8px;
    box-shadow: 1px 1px 3px #eee;
    padding: 18px;
    font-size: 16px;
    color: var(--el-color-primary);

    /* border: 1px solid #ccc; */
    .close{
      position: absolute;
      top: 15px;
      right: 15px;
      color: #333;
    }
    .login_t {
      text-align: center;
      margin-bottom: 15px;
    }
  }

  .login_btn {
    margin-top: 26px;
    width: 100%;
    margin-bottom: 10px;
    background: var(--el-color-primary);
    border: var(--el-color-primary);
  }

  .send_code {
    width: 100px;
    background: var(--el-color-primary);
    border: var(--el-color-primary);
  }
}
</style>
